iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 9
0
自我挑戰組

「 Nice to meet you , JavaScript . 」- 學習日記 系列 第 9

初探JavaScript - JS 物件 Objects

  • 分享至 

  • xImage
  •  

物件也是變數,但是物件可以包含許多的值,如下:

變數customer被賦予值(Flora、Li、27、0988111222),值在物件中會以name:value的方式成對的出現,在JavsScript中,把每一對的name稱之為property(屬性)value稱為Property Value(屬性值),並以逗點分隔,最後用大括號{}將這些屬性包起來為一個物件:

var  customer = {
            firstName: "Flora",
            lastName: "Li",
            age: 27,
            phone: "0988111222"
}

// property(屬性) : firstNamelastNameagephone
// Property Value(屬性值) : FloraLi270988111222

斷行或是空白鍵對於物件來說是沒有影響的,所以可依方便閱讀的方式呈現。

每個物件都可以擁有自己的方法即此物件動作行為(功能)的表現,而這個方法會以屬性值的方式被儲存,如下fullName方法:

var customer = {
            firstName: "Flora",
            lastName: "Li",
            age: 27,
            phone: "0988111222",
            fullName : function() {
                return this.firstName + " " + this.lastName;
            }
       }

  • 如何取用物件中的每個「屬性值」?

使用物件名稱.屬性名稱**objectName.propertyName**即可取得其屬性值。
如下程式碼,欲取得customer物件中的屬性值,則以customer.firstName取得Flora ; customer.lastName取得Li

<body>
    <h1 id="introID"></h1>

    <script>
            var customer = {
                firstName: "Flora",
                lastName: "Li",
                age: 27,
                phone: "0988111222"
            }

            document.getElementById("introID").textContent = '您好!我的名字叫' + customer.firstName + " " + customer.lastName + '!!!';

    </script>
</body>

執行結果:
您好!我的名字叫Flora Li!!!

除了使用**objectName.propertyName**,還可以寫成objectName["propertyName"]來取得屬性值,如下:

<body>
    <h1 id="introID"></h1>
    <script>
        var customer = {
            firstName: "Flora",
            lastName: "Li",
            age: 27,
            phone: "0988111222"
        }

        document.getElementById("introID").textContent = '您好!我的名字叫' + customer["firstName"] + " " + customer["lastName"] + '!!!';
    </script>
</body>

執行結果:
您好!我的名字叫Flora Li!!!


  • 物件中的「方法」該如何取用?

以上兩種「屬性值」的取用方式不適用於同樣被儲存成屬性值的方法,若是想要取用物件的方法該使用什麼語法呢?可以使用objectName.methodName(),用法如下:
https://ithelp.ithome.com.tw/upload/images/20200909/20115106p1duWXnFhY.png

[小提醒]
在使用objectName.methodName()時,如果沒有加上()則會將整個函式輸出,而不是輸出其執行的結果,所以要特別注意,範例如下:
https://ithelp.ithome.com.tw/upload/images/20200909/20115106YUkMBF37fa.png


  • 關於this關鍵字

在函式中使用this會指向這個函式的擁有者,如下例,this指向的fullName函式的擁有者customer,所以this.firstName中的firstName即為customer物件中的firstName

var customer = {
            firstName: "Flora",
            lastName: "Li",
            age: 27,
            phone: "0988111222",
            fullName : function() {
                return this.firstName + " " + this.lastName;
            }
}

資料參考來源: w3schools.com、Hex School


上一篇
初探JavaScript - JS陣列常用屬性和方法
下一篇
初探JavaScript - JS 比較運算子與邏輯運算子
系列文
「 Nice to meet you , JavaScript . 」- 學習日記 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言